<template>
  <px-card shadow="never" style="width: 100%">
    <div class="title">
      <p>报修人：{{ detailData.createName }}</p>
      <p>维修工单</p>
      <p>优先级：{{ detailData.weightDesc }}</p>
    </div>
    <section>
      <p class="print-title">工单基本信息</p>
      <div class="print-content">
        <div class="print-item">
          <div class="label">任务单号</div>
          <div class="text">{{ detailData.workOrderCode }}</div>
        </div>
        <div class="print-item">
          <div class="label">工单主题</div>
          <div class="text">{{ detailData.workOrderName }}</div>
        </div>
        <div class="print-item">
          <div class="label">所属地块</div>
          <div class="text">{{ detailData.facCodeDesc }}</div>
        </div>
        <div class="print-item">
          <div class="label">设备编号</div>
          <div class="text">{{ detailData.eqpId }}</div>
        </div>
        <div class="print-item">
          <div class="label">设备名称</div>
          <div class="text">{{ detailData.eqpName }}</div>
        </div>
        <div class="print-item">
          <div class="label">设备位置</div>
          <div class="text">{{ detailData.positionCodeDesc }}</div>
        </div>
        <div class="print-item large">
          <div class="label">问题描述</div>
          <div class="text">{{ detailData.faultDesc }}</div>
        </div>
        <div class="print-item large">
          <div class="label">维修前照片</div>
          <div class="text">
            <PhotoUpload photoType="view" :photoData="{ moduleName: moduleName }" :photoList="detailData.faultImageList" />
          </div>
        </div>
        <div class="print-item">
          <div class="label">预计开始时间</div>
          <div class="text">{{ detailData.planStartTime }}</div>
        </div>
        <div class="print-item">
          <div class="label">预计结束时间</div>
          <div class="text">{{ detailData.planEndTime }}</div>
        </div>
        <div class="print-item">
          <div class="label">是否需要消防中断</div>
          <div class="text">{{ detailData.isStop ? "是" : "否" }}</div>
        </div>
        <div class="print-item">
          <div class="label">是否需要火警隔离</div>
          <div class="text">{{ detailData.isFireIsolation ? "是" : "否" }}</div>
        </div>
        <div class="print-item">
          <div class="label">执行人</div>
          <div class="text">{{ detailData.executorName }}</div>
        </div>
        <div class="print-item">
          <div class="label">审核人</div>
          <div class="text">{{ detailData.approverName }}</div>
        </div>
      </div>
    </section>
    <template v-for="(item, index) in detailData.recordList" :key="index">
      <p class="print-title">维修记录{{ enumList[index] }}</p>
      <section class="print-content">
        <div class="print-item">
          <div class="label">维修开始时间</div>
          <div class="text">{{ item.acceptTime }}</div>
        </div>
        <div class="print-item">
          <div class="label">执行人</div>
          <div class="text">{{ item.executorName }}</div>
        </div>
        <div class="print-item large">
          <div class="label">维修后照片</div>
          <div class="text"><PhotoUpload photoType="view" :photoData="{ moduleName: moduleName }" :photoList="item.faultImageList" /></div>
        </div>
        <div class="print-item">
          <div class="label">是否更换备件</div>
          <div class="text">{{ item.sparePartOutNum ? "是" : "否" }}</div>
        </div>
        <div class="print-item">
          <div class="label">关联出库单</div>
          <div class="text">{{ item.sparePartOutNum }}</div>
        </div>
        <p class="record-list-title">关联备件</p>
        <px-table
          :header-cell-style="{ background: '#f5f5f5', color: 'rgba(0,0,0,0.8);', fontWeight: 600 }"
          :data="item.sparePartInventoryDTOList"
          style="width: 100%"
          class="print-table"
          border
        >
          <px-table-column type="index" label="序号" min-width="64" />
          <px-table-column prop="facCodeDesc" label="所属地块" min-width="180" />
          <px-table-column prop="sparePartName" label="备件名称" min-width="180" />
          <px-table-column prop="eqpTypeCodeDesc" label="备件类型" min-width="180" />
          <px-table-column prop="specification" label="规格型号" min-width="180" />
          <px-table-column prop="brandVal" label="品牌" min-width="120" />
          <px-table-column prop="sparePartUnit	" label="单位" min-width="120" />
          <px-table-column prop="quantity" label="本次出库数量" min-width="120" />
          <px-table-column prop="usedQuantity" label="实际使用数量" min-width="120" />
        </px-table>
        <div class="print-item large">
          <div class="label">维修描述</div>
          <div class="text">{{ item.faultCause }}</div>
        </div>
      </section>
      <!-- <p class="print-title">维修故障归类</p>
      <section class="print-content">
        <div class="print-item large">
          <div class="label">故障类型</div>
          <div class="text">{{ item.faultTypeDesc }}</div>
        </div>
        <div class="print-item large">
          <div class="label">备注</div>
          <div class="text">{{ item.remark }}</div>
        </div>
      </section> -->
    </template>
  </px-card>
</template>

<script lang="ts" setup>
import { detailMaintainList, getModuleName, getRecordList } from "@/api/erc/maintain";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import { computed, reactive, toRefs, watchEffect } from "vue";

// 父级传过来的值
const props = defineProps(["taskId", "isPrint"]);

const isPrint = computed(() => props.isPrint);

const state = reactive<any>({
  detailData: {},
  moduleName: ""
});

const { detailData, moduleName } = toRefs(state);

const enumList = {
  0: "一",
  1: "二",
  2: "三",
  3: "四",
  4: "五"
};

const getModuleNameValue = async () => {
  const data = await getModuleName();
  moduleName.value = data;
};

const getDetail = async () => {
  getModuleNameValue();
  const orderDetail = await detailMaintainList({ id: props.taskId });
  const recordList = await getRecordList(props.taskId);

  detailData.value = { ...orderDetail, recordList };
};

watchEffect(() => {
  if (isPrint.value) {
    getDetail();
  }
});
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 3px solid #000;

  p:first-child,
  p:nth-child(3) {
    font-size: 14px;
    color: rgb(0 0 0 / 80%);
  }

  p:nth-child(2) {
    font-size: 36px;
    font-weight: 600;
    color: rgb(0 0 0 / 80%);
  }
}

.print-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.75;
  color: rgb(0 0 0 / 80%);
  margin-top: 24px;
}

.print-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid #dcdcdc;

  .print-item {
    display: flex;
    width: 50%;
    line-height: 40px;
    border-bottom: 1px solid #dcdcdc;

    &:nth-last-child(1),
    &:nth-last-child(2) {
      border: none;
    }
    &:nth-last-child(1) {
      border-top: 1px solid #dcdcdc;
    }

    .label {
      display: flex;
      align-items: center;
      justify-content: center;
      // justify-content: flex-end;
      width: 150px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      background: #f7f7f7;
      border-right: 1px solid #dcdcdc;
    }

    .text {
      display: flex;
      flex: 1;
      align-items: center;
      padding-left: 8px;
      font-size: 14px;
      line-height: 18px;
      color: rgb(0 0 0 / 90%);
      word-break: break-all;

      .tag {
        height: 22px;
        padding: 0 8px;
        font-size: 12px;
        line-height: 22px;
        color: rgb(0 0 0 / 80%);
        text-align: center;
        border-radius: 4px;
      }
    }

    &.large {
      width: 100%;
    }
  }
  .record-list-title {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    text-align: center;
    margin: 12px auto;
  }
  .print-table {
    margin: 12px;
    box-sizing: border-box;
  }
}
</style>
